<template>
    <page-layout>
        <template v-slot:header>
            <el-button size="small" type='primary' @click='saveEvt'>保存</el-button>
            <el-button size="small" @click="cancleEvt">取消</el-button>
        </template>
        <el-form :model="query"
            :rules="rules"
            ref="ruleForm"
            size="small"
            label-width="100px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="商铺编码" prop="shop_id">
                        <el-input v-model="query.shop_id" placeholder="输入商铺编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="商铺名字" prop="shop_name">
                        <el-input v-model="query.shop_name" placeholder="输入商铺名字"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="店长" prop="manager">
                        <el-input v-model="query.manager" placeholder="输入"  style="{width:calc(100% - 32px)}">
                            <template #append>
                                <el-button type='primary' icon="el-icon-search" @click="searchManager"/>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
                    <el-form-item label="店员" prop="clark" class="tagClass">
                        <el-button type='primary' icon="el-icon-search" @click="searchClerk"/>

                        <el-tag   v-for="it in query.clark" :key="it.id"
                            @close="closeClerkEvt(it)" closable>
                            {{ it }}
                        </el-tag>

                    </el-form-item>
                </el-col> 
          
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="商铺经度" prop="lat">
                        <el-input v-model="query.lng" placeholder="输入商铺编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="商铺纬度" prop="lng">
                        <el-input v-model="query.lat" placeholder="输入商铺编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="经营区域" prop="area" >
                        <el-cascader
                        size="small"
                        v-model="query.area"
                        :options="options"
                        @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="query.address" placeholder="输入商铺编码"></el-input>
                    </el-form-item>
                </el-col>                             
       
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="query.remark" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        
        <Manager v-model="show" @managerSelectEvt='managerSelectEvt'/>
        <Clerk v-model="show1" @clerkSelectEvt='clerkSelectEvt' :checkClark="checkClark" />
    </page-layout>
</template>
<script>
import { regionData } from 'element-china-area-data'
import Manager from './Manager.vue'
import {shopAddtApi ,shopUpdateApi} from '../../../apis/shopApi'
import Clerk from './Clerk.vue'

export default {
    components:{Manager, Clerk},
    data(){
        return{
            clerkArr:[],
            show1:false,
            show:false,
            query:{
                "shop_id": "",
                "shop_name": "",
                "lng": "",
                "lat": "",
                "area": "",
                "address": "",
                "manager": "",
                "clark": [],
                "remark": ""
            },
            checkClark:[],
            rules:{
                shop_id:[
                    {required: true, message: '商铺编码必须输入'}
                ],
                shop_name:[
                    {required: true, message: '商铺名字必须输入'}
                ],
                manager:[
                    {required: true, message: '店长必须选择'}
                ],
                clark:[
                    {required: true, message: '店员必须选择'}
                ],
                lat:[
                    {required: true, message: '纬度为必填'}
                ],                
                lng:[
                    {required: true, message: '经度为必填'}
                ],                
                area:[
                    {required: true, message: '经营区域为必填'}
                ],  
                address:[
                    {required: true, message: '经营区域为必填'}
                ],              
                remark:[
                    {required: true, message: '经营区域为必填'}
                ],
            },

            options: regionData,
            selectedOptions: [],
            isEdit:false
        }
    },
    created(){
        //判断是编辑还是新增
        this.isEdit = !!this.$route.query.shop_id
        if(this.isEdit){
            this.query = this.$route.query
            this.query.clark = this.query.clark.split('&')
        }
        console.log(this.options)
    },
    methods:{
        closeClerkEvt(it){
           this.query.clark = this.query.clark.filter(item => item !== it)
        },
        cancleEvt(){
            this.$router.back()
        },
        clerkSelectEvt(rows){
            this.query.clark =  this.query.clark? this.query.clark.concat(rows.map(it => it.id)) : this.query.clark.push(rows.map(it => it.id))
            
        },
        managerSelectEvt(rows){
            this.query.manager=rows.id
        },
        async saveEvt(){
          if(!!this.isEdit){
            let result = await shopUpdateApi({...this.query,clark:this.query.clark.join('&'),area:'四川省/成都市/武侯区'})
            if(result.code !==200){
                this.$message.error('保存失败，原因：' + result.message)
                return
            }
            this.$message.success('保存门店成功')
            this.$router.push('/shop/list')
          }else{
            let result = await shopAddtApi({...this.query,clark:this.query.clark.join(''),area:this.query.area.join('')})
            if(result.code !==200){
                this.$message.error('新增失败，原因：' + result.message)
                return
            }
             this.$message.success('新增门店成功')
            }
        },
       
        searchManager(){
            this.show=true
            console.log('-------------')
        },
        searchClerk(){
            this.checkClark = this.query.clark 
            this.show1=true
        },
        handleChange (value) {
            console.log('===='+value)
        },

    }

}
</script>

<style lang="less" scoped>
    .tagClass{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>